<template>
  <div v-if="elProps">
    <ElDivider>属性设置</ElDivider>
    <ElForm :model="elProps" label-width="80px">
      <template v-for="item in Object.keys(elProps)" :key="item">
        <component
          v-if="getPropertyEditor(item)"
          :is="getPropertyEditor(item)"
          :selected-widget="selectedWidget"
          :el-props="elProps"
          :designer="designer"
        ></component>
      </template>
    </ElForm>
  </div>
</template>

<script setup lang="ts" name="ElPropsPanel">
import { ElForm, ElDivider } from "element-plus";
import comps from "../EditorPanel";
import { computed } from "vue";
const props = defineProps({
  designer: {
    type: Object
  }
});
const selectedWidget = computed(() => {
  return props.designer!.widget?.selectedWidget || {};
});
const elProps = computed(() => selectedWidget.value?.elProps);
const getPropertyEditor = item => {
  const itemName = item.at(0).toUpperCase() + item.substring(1);
  const editorName = selectedWidget.value?.type + itemName + "Editor";
  let Component = comps[editorName];
  if (!Component) {
    Component = comps[itemName + "Editor"];
  }
  return Component;
};
</script>

<style scoped></style>
